<!-- file input -->
<script type="text/javascript" src="../../static/js/fileinput/fileinput.js"
        th:src="@{/js/fileinput/fileinput.js}"></script>
<link rel="stylesheet" href="../../static/css/fileinput/fileinput.css" type="text/css"
      th:href="@{/css/fileinput/fileinput.css}"/>
<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">

                        <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab"
                                                                  data-toggle="tab" aria-expanded="true">详细信息</a>
                        </li>

                    </ul>
                    <div id="myTabContent" class="tab-content">

                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1"
                             aria-labelledby="home-tab">
                            <input type="hidden" id="SERVERIP" th:value="${SERVERIP}" />
                            <input type="hidden" id="LNGLOA" th:value="${LNG}" />
                            <input type="hidden" id="LATLOA" th:value="${LAT}" />
                            <form class="form-horizontal form-label-left">
                                <input type="hidden" id="eventId" th:value="${eventId}" />
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">上报人:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="empName1" th:value="${event?.empName}"/>
                                    </div>

                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">事件分类:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="eventTypeId" th:value="${event?.val}"/>
                                    </div>
                                </div>
                                <div class="form-group" th:if="${event?.gridName != null}">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">所属网格:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="gridId" th:value="${event?.gridName}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">事件地址:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" readonly="readonly" id="eventLocation" th:value="${event?.eventLocation}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">事件位置:</label>
                                    <div class="col-md-4 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" id="lng" readonly="readonly" th:value="${event?.lng}"/>
                                    </div>
                                    <div class="col-md-1 col-sm-9 col-xs-12"></div>
                                    <div class="col-md-4 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" id="lat" readonly="readonly" th:value="${event?.lat}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">事件编码:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <input type="text" class="form-control" id="eventCode" readonly="readonly" th:value="${event?.eventCode}"/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">事件描述:</label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        <textarea class="form-control" rows="3" id="eventContent"  readonly="readonly" th:text="${event?.eventContent}"></textarea>
                                    </div>
                                </div>
                                <div class="ln_solid"></div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab1" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content2" id="home-tab1" role="tab"
                                                                  data-toggle="tab" aria-expanded="true">流转记录</a>
                        </li>
                    </ul>
                    <div id="myTabContentt" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content2"
                             aria-labelledby="profile-tab">
                            <div class="x_content" id="tab2"
                                 style="width: 100%;   overflow:hidden; overflow-y: scroll;">
                                <ul class="list-unstyled timeline" id="commentTree">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8 col-sm-6 col-xs-12">
        <div class="x_panel">
            <div class="x_content" style="position: relative;">
                <div id="map"></div>
                <button style="position: absolute; width: 100px; right: 2%; bottom: 19px; z-index: 100000" type="button" onclick="find()" class="btn btn-success">返 &nbsp;&nbsp;回</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $("#map").height($(window).height()-160);
    //地图
    var SERVERIP = $("#SERVERIP").val(), LNGLOA = $("#LNGLOA").val(), LATLOA = $("#LATLOA").val();
    var map, baiduLayer, pointVector, vector, layer,layerCH, markerlayer, marker, dataAdded = false,
        urlCH = SERVERIP + HB_SERVER_CH,
        url =SERVERIP+ HB_SERVER_IP;
    //初始化地图及图层
    $(function () {
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.LayerSwitcher()
            ],
            units: "m", allOverlays: true
        });
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
        layer.events.on({"layerInitialized": addLayer1});
        vector = new SuperMap.Layer.Vector("vector");
        markerlayer = new SuperMap.Layer.Markers("markerLayer");
    });

    //加载
    function addLayer1() {
        layerCH = new SuperMap.Layer.TiledDynamicRESTLayer("中文注释", urlCH, {
            transparent: true,
            cacheEnabled: true
        });
        layerCH.events.on({
            "layerInitialized": addLayer2
        });
        layerCH.setOpacity(0.9);
    }

    function addLayer2() {
        map.addLayers([layer,layerCH, vector,markerlayer]);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(LNGLOA, LATLOA), 13);
    }
    /*]]>*/
</script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    function find() {
        $.goTo(/*[[@{/eventTurn/queryEventForList}]]*/"./event_list.html");
    }

    $(function () {  //默认加载list页
        var eventId = $("#eventId").val();
        var lng = $("#lng").val();
        var lat = $("#lat").val();
        console.log(eventId+"-"+lng+"-"+lat);

        //清空图层
        vector.removeAllFeatures();
        if (marker != undefined) {
            markerlayer.removeMarker(marker);
        }
        var point = new SuperMap.Geometry.Point(lng, lat);
        //给点定义样式，此处是超图的矢量图
        pointVector = new SuperMap.Feature.Vector(point);
        pointVector.style = {
            fillColor: "#fff", //内圈颜色
            strokeColor: "#fff", //外圈颜色
            pointRadius: 1 //点的大小
        };
        //图片大小限制
        var size = new SuperMap.Size(44, 33);
        //偏移量
        var icon = new SuperMap.Icon('../images/1111.gif', size);
        marker = new SuperMap.Marker(new SuperMap.LonLat(lng, lat), icon);
        //打点
        vector.addFeatures(pointVector);
        markerlayer.addMarker(marker);

        $.post("/event/findCommentByObjecId", {"eventId": eventId}, function (result) {
            var content = "";
            if(result.length>0){
                var str = new Array()
                $.each(result, function (index, item) {
                    str = item.userId.split("_");
                    content += "<li style='font-size: 14px;'> <div class='block'><div class='tags'><a class='tag'>";
                    if (str[0] != null) {
                        content += "     <span>" + str[1] + "</span>";
                    } else {
                        content += "     <span>未设置</span>";
                    }
                    content += "     </a> </div>";
                    content += "    <div class='block_content'> <h2 class='title' style='font-size: 14px; ' >";
                    if (str[2] != null) {
                        content += "     <span style='font-weight: 600;'>部门名称：</span><a>" + str[0] + "</a>";
                    } else {
                        content += "      <span style='font-weight: 600;'>部门名称：</span><a>未设置</a>";
                    }
                    content += "     </h2> <div class='byline' style='font-style: inherit; color: #5A738E;'>";
                    if (str[1] != null) {
                        content += "    处 &nbsp;理 &nbsp;&nbsp;人：<a>" + str[2] + "</a>";
                    } else {
                        content += "     处理人：<a>未设置</a>";
                    }
                    content += "    </div>";
                    content += "   <p class='excerpt'>处理意见：" + item.fullMessage + " <a>";
                    if (str[3] != "" && str[3] != null) {
                        content += '       <button type="button" onclick="getEventAccessory(\'' + str[3] + '\')" class="btn btn-primary btn-lg" style="float: right" > 附件详情</button>';
                    }
                    content += "     </a> </p></div></div></li>";
                })
            }else{
                content = "任务还未处理！"
            }
            $("#commentTree").empty();
            $("#commentTree").append(content);
        });
    });

    //展示时间轴附件信息
    function getEventAccessory(id) {
        var img = "";
        var mp4 = "";
        var mp3 = "";

        $.post("/event/getEventAccessory", {"eventId": id}, function (result) {
            $("#mp3").empty();
            $("#mp4").empty();
            $("#eventImg").empty();
            $.each(result, function (index, item) {
                if (item.accessoryType == "1") {
                    img += "<div class='item '>" +
                        "<img src='" + item.accessoryPath + "' alt='...'>" +
                        "<div class='carousel-caption'>" +
                        "</div>" +
                        "</div>"
                }

                if (item.accessoryType == "3") {
                    //视频
                    mp4 += "<video width='320' height='240' controls>" +
                        " <source  src='" + item.accessoryPath + "' width='352' height='264' controls autobuffer type='video/mp4'>" +
                        "       您的浏览器不支持 HTML5 video 标签。" +
                        "</video>"
                }

                if (item.accessoryType == "2") {
                    //音频
                    mp3 += "<audio controls>" +
                        "<source  height='100' width='352' src='" + item.accessoryPath + "' type='audio/ogg/amr'>" +
                        " 您的浏览器不支持 audio 元素。" +
                        "</audio>"
                }
            });

            $("#mp3").append(mp3);
            $("#mp4").append(mp4);
            $("#eventImg").append(img);
            $("#eventImg").find(".item").eq(0).addClass("active");
            $("#ModalInfo").modal('show');
        });
    }
    /*]]>*/
</script>